<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        案例一： 普通事件的添加
        <hr />
        <button @click="fn">点击</button> <br /> 案例二： 要去回车弹出input的value值
        <hr />
        <div>
            <input type="text" @keydown="getVal" />
        </div>
        案例三： 即有e，也有其他参数: 必须用$event来对应事件对象
        <hr />
        <div>
            <button @click="handler(1000,$event)">点击</button>
        </div>
        案例四：事件传参
        <hr />
        <div>
            <ul>
                <li v-for="(item,index) in todos">
                    {{ item.task }} <button :data-id="item.id" @click="del">删除</button>
                </li>
            </ul>
        </div>
    </div>
</body>
<script src="../../lib/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                todos: [{
                    id: 1,
                    task: "任务一",
                }, {
                    id: 2,
                    task: "任务二",
                }, ],
            };
        },
        methods: {
            // del(index) {
            del(e) {
                // 界面中删除一条，意味着我们只要删除todos中对应的这一条即可
                // 数组中删除一条      splice   filter
                // this.todos.splice(index,1)
                this.todos = this.todos.filter((item) => item.id != e.target.dataset.id);
            },
            fn() {
                // 这是事件处理程序，也是方法，我们必须了解： 1. 事件对象  2. 事件传参
                alert("vue中的事件");
            },
            getVal(e) {
                // 结论： 原生js如何使用e，那你就如何使用
                if (e.keyCode == 13) {
                    alert(e.target.value);
                }
            },
            handler(type, e) {
                // 问题是：这个事件处理程序即需要事件对象e，也需要另外一个参数type，怎么办？
                console.log(e);
                console.log(type);
            },
        },
    }).mount("#app");
</script>

</html>